<template>
  <div >
    <Header></Header>
    <div>
      <div class="main page-api article-wrapper" id="myElement" >
        <div class="markdown-body blog-content" id="content"
             v-html="blogDetail.content"
             v-highlight
        ></div>


      </div>
      <!--这里 outline.js 会生成导航菜单-->
      <aside id="aside">

      </aside>

    </div>

    <Footer></Footer>
  </div>
</template>


<script>
import Vue from 'vue';
import { getBlogDetail } from '@/api/blog/blog'
import { css} from "@/assets/styles/blogDetail.css";
import Header from '@/views/tool/build/Header.vue'
import Footer from '@/views/tool/build/Footer.vue'
// markdown转换
import marked  from 'marked';
import VueMarkdown from "vue-markdown";
import CodeCopy from "@/views/blog/CodeCopy.vue";

const Outline = require('../../../resources/outline.js');
import '../../../resources/outline.js/outline.css'

export default {
  components: { Footer, Header,VueMarkdown },
  data() {
    return {
      id: 2,
      blogDetail: {
        title:"",
        content:"",

      },
      outline: null
    }
  },
  created() {
    //当前主键已经挂载到DOM上，（已展示）时被vue自动调用
    this.id = this.$route.params.id
    this.getBlogDetail()
  },
  watch: {

  },
  beforeDestroy() {

  },
  mounted( ){

  },
  updated() {
    this.update();
  },
  methods: {
    /** 查询博客详情 */
    getBlogDetail() {
      this.loading = true;
      getBlogDetail(this.id).then(response => {
        this.blogDetail = response.data;
        this.blogDetail.content = marked(response.data.content);
        this.$nextTick(() => {
          this.outline = new Outline({
            articleElement: '#content',
            selector: 'h2,h3,h4,h5,h6',
            scrollElement: 'html,body',
            position: 'sticky',
            placement: '',
            parentElement: '#aside',
            stickyHeight: 50,
            // 如果喜欢更简洁的高亮效果，可以选择设置为 false
            animationCurrent: true,
            // 是否显示侧边的按钮工具栏
            hasToolbar: true,
            customClass:'',
          });
        })
      });
    },
    update() {
      this.$nextTick(() => {
        document.querySelectorAll('pre').forEach(el => {
          if (el.classList.contains('code-copy-added')) return
          //   https://cn.vuejs.org/v2/api/index.html#Vue-extend
          /* 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 */
          let ComponentClass = Vue.extend(CodeCopy)
          let instance = new ComponentClass()
          instance.code = el.innerText
          instance.parent = el
          /* 手动挂载 */
          instance.$mount()
          el.classList.add('code-copy-added')
          el.appendChild(instance.$el)
        })
      })
    },
  }
}
</script>

<style  lang="scss">

</style>
